<template>
    <div class="radio-group-container">
      <label v-for="(item, index) in items" :key="index" :class="{ selected: selected === item.value }">
        <input type="radio" :value="item.value" v-model="selected" @change="selectItem(item.value)">
        <span class="checkmark"></span>
        {{ item.label }}
      </label>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RadioGroup',
    props: {
      items: {
        type: Array,
        required: true
      },
      value: {
        type: String,
        required: true
      }
    },
    watch: {
		value() {
			this.selected = this.value
		}
	},
    data(){
        return{
            selected:null
        }
    },
    methods: {
      selectItem(item) {
        this.selected = item
        this.$emit("input",this.selected)
      }
    }
  }
  </script>
  
  <style scoped>
  .radio-group-container {
    display: flex;
    flex-wrap: wrap;
    color: aliceblue;
  }
  
  label {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-right: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
  
  input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #00b3ff;
  }
  
  .selected .checkmark {
    background-color: #00b3ff;
  }
  
  label:hover .checkmark {
    border-color: #4d5b84;
  }
  
  input[type="radio"]:checked ~ .checkmark {
    background-color: #00b3ff;
  }
  
  label:hover input[type="radio"]:checked ~ .checkmark {
    background-color: #4d5b84;
  }
  
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  input[type="radio"]:checked ~ .checkmark:after {
    display: block;
  }
  
  .checkmark:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
  }
  </style>